<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Study french easy</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
    <nav>
        <a href="login.html" id="login-btn">Login</a>
        <a href="logout" id="logout-btn">Logout</a>
    </nav>
    <h1 class="site-title">Study french easy</h1>
</header>
<nav class="category-list">
    <ul>
        <li>
            <a href="lesson.html?category=fruits">
                <div class="category-image">
                    <img src="img/category-fruits.jpg">
                </div>
                <h3>les fruits</h3>
            </a>
        </li>
        <li>
            <a href="lesson.html?category=jardinage">
                <div class="category-image">
                    <img src="img/category-jardinage.jpg">
                </div>
                <h3>le jardinage et le bricolage</h3>
            </a>
        </li>
        <li>
            <a href="lesson.html?category=les%20formes%20g%C3%A9om%C3%A9triques">
                <div class="category-image">
                    <img src="img/category-forms-geometrique.png">
                </div>
                <h3>Les formes géométrique</h3>
            </a>
        </li>
    </ul>
</nav>
</body>
<script src="js/auth.js"></script>
</html>